<template>
  <div class="login">
    <Row
      type="flex"
      justify="center"
      align="middle"
      @keydown.enter.native="submitRegist"
      style="height: 95vh"
    >
      <Col class="layout">
        <div>
          <Header
            style="
              height: 25%;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-left: -30px;
            "
          />
          <Row>
            <div class="Formbox">
              <div
                style="
                  font-size: 16px;
                  font-weight: 600;
                  cursor: pointer;
                  margin-right: 90px;
                  margin-left: -195px;
                "
              >
                货主注册
              </div>
              <div
                style="
                  font-size: 18px;
                  font-weight: 600;
                  cursor: pointer;
                  color: #c0c0c0;
                "
                :class="personalShow ? 'Formbox1' : ''"
                @click="personalClick"
              >
              </div>
            </div>
            <Form ref="registForm" :model="form" :rules="rules" class="form">
              <FormItem prop="mobile">
                <Input
                  style="width: 353px"
                  v-model="form.mobile"
                  size="large"
                  clearable
                  placeholder="请输入手机号"
                >
                  <Select v-model="select" slot="prepend" style="width: 70px">
                    <Option value="86">+86</Option>
                  </Select>
                </Input>
              </FormItem>
              <FormItem prop="password">
                <SetPassword
                  style="width: 353px"
                  size="large"
                  v-model="form.password"
                  @on-change="changeInputPass"
                />
              </FormItem>
              <FormItem prop="imgCode">
                <Row
                  type="flex"
                  justify="space-between"
                  style="align-items: center; overflow: hidden"
                >
                  <Input
                    v-model="form.imgCode"
                    size="large"
                    clearable
                    placeholder="请输入图片验证码"
                    :maxlength="10"
                    style="width: 231px"
                  />
                  <div
                    class="code-image"
                    style="position: relative; font-size: 12px"
                  >
                    <Spin v-if="loadingCaptcha" fix></Spin>
                    <img
                      :src="registImg"
                      @click="getCaptchaImg"
                      alt="加载验证码失败"
                      style="width: 113px; cursor: pointer; display: block"
                    />
                  </div>
                </Row>
              </FormItem>
              <FormItem prop="code" :error="errorCode">
                <Row type="flex" justify="space-between">
                  <div style="display: flex">
                    <div>
                      <Input
                        v-model="form.code"
                        size="large"
                        clearable
                        placeholder="请输入短信验证码"
                        :maxlength="10"
                        style="width: 230px"
                      />
                    </div>
                    <div style="margin-left: 10px">
                      <CountDownButton
                        ref="countDown"
                        @on-click="checkVaptcha"
                        :autoCountDown="false"
                        size="large"
                        :loading="sending"
                        :text="getSms"
                      />
                    </div>
                  </div>
                </Row>
              </FormItem>
            </Form>
            <Row
              type="flex"
              justify="space-between"
              align="middle"
              style="margin-top: -10px"
            >
              <div style="display: flex; justify-content: space-between">
                <div style="display: flex">
                  <div>
                    <Checkbox v-model="saveLogin" size="large">
                      <span style="font-size: 12px; color: eee">
                        我已阅读并同意</span
                      >
                    </Checkbox>
                  </div>

                  <div class="agreement1" @click="useRegistration">
                    《用户注册协议》
                  </div>
                  <div
                    class="agreement2"
                    @click="userAgreementAndrivacy"
                    style="margin-left: -5px"
                  >
                    《用户协议与隐私政策》
                  </div>
                </div>
                <div></div>
              </div>
            </Row>
          </Row>
          <Row style="display: block; margin-top: -8px">
            <Button
              class="login-btn"
              style="width: 355px"
              type="primary"
              size="large"
              :loading="loading"
              @click="submitRegist"
              long
            >
              <span v-if="!loading">注册</span>
              <span v-else>注册中...</span>
            </Button>
            <div style="height: 10px; width: 100%"></div>
            <span class="long-to">已有账户？ </span>
            <router-link to="/login">
              <a class="to-login">去登录</a>
            </router-link>
          </Row>
        </div>
      </Col>
      <LangSwitch />
    </Row>
    <!-- <Footer /> -->
    <!-- 弹框 -->
    <Modal
      class="RuleLis"
      v-model="Ruleimod"
      :title="Ruletitle"
      width="50%"
      height="500"
    >
      <iframe
        style="border: 0"
        :src="this.htmls"
        height="540"
        width="100%"
        name="demo"
        scrolling="auto"
        sandbox="allow-same-origin"
      ></iframe>
      <div slot="footer">
        <Button @click="Ruleimod = false">取消</Button>
        <Button type="primary" @click="Ruleimod = false">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  vaptchaID,
  vaptchaOffline,
  registMobile,
  sendRegistSms,
  initCaptcha,
  drawCodeImage,
} from "@/api/index";
import {
  validateUsername,
  validateMobile,
  validatePassword,
} from "@/libs/validate";
import Header from "@/views/main-components/header";
import Footer from "@/views/main-components/footer";
import LangSwitch from "@/views/main-components/lang-switch";
import CountDownButton from "@/views/my-components/freight/count-down-button";
import SetPassword from "@/views/my-components/freight/set-password";
var vaptchaObject;
export default {
  components: {
    CountDownButton,
    LangSwitch,
    SetPassword,
    Header,
    Footer,
  },
  data() {
    return {
      Ruletitle: "隐私协议",
      Ruleimod: false,
      htmls: "",

      authenticationRadio: "企业认证",
      saveLogin: false,
      personalShow: false,
      enterpriseShow: true,
      loadingCaptcha: true,
      registImg: "",
      captchaId: "",
      button7: "北京",
      getSms: "获取验证码",
      error: false,
      loading: false,
      sending: false,
      select: "86",
      errorCode: "",
      form: {
        password: "",
        mobile: "",
        code: "",
        userType: "0",
      },
      rules: {
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            validator: validatePassword,
            trigger: "blur",
          },
        ],

        mobile: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            validator: validateMobile,
            trigger: "blur",
          },
        ],
        // code: [
        //   {
        //     required: true,
        //     message: "请输入短信验证码",
        //     trigger: "blur",
        //   },
        // ],
        imgCode: [
          {
            required: true,
            message: "请输入图片验证码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    personalClick() {
      this.personalShow = true;
      this.enterpriseShow = false;
      this.form.userType = "3";
    },
    enterpriseClick() {
      this.personalShow = false;
      this.enterpriseShow = true;
      this.form.userType = "0";
    },
    useRegistration() {
      //隐私协议 --
      this.Ruletitle = "《" + "用户注册协议" + "》";
      this.htmls = "http://47.92.248.46:8089/platformrules/1726.html";
      // /
      this.Ruleimod = true;
    },
    userAgreementAndrivacy() {
    this.htmls = "http://47.92.248.46:8089/platformrules/1651.html"
      // this.htmls = "https://www.shantuai.com:8089/platformrules/1651.html";
      // 注册协议 --
      this.Ruletitle = "《" + "用户协议与隐私政策" + "》";
      this.Ruleimod = true;
      //
    },
    getCaptchaImg() {
      this.loadingCaptcha = true;
      initCaptcha().then((res) => {
        this.loadingCaptcha = false;
        if (res.success) {
          this.captchaId = res.result;
          this.registImg = drawCodeImage + this.captchaId;
        }
      });
    },
    initVaptcha() {
      let that = this;
      vaptcha({
        //配置参数
        vid: vaptchaID, // 验证单元id
        type: "invisible", // 展现类型 隐藏式
        offline_server: vaptchaOffline, // 离线验证接口地址 可选但此处不能为空
      }).then(function (vaptchaObj) {
        // vaptchaObject = vaptchaObj;
        vaptchaObj.listen("pass", function () {
          that.form.token = vaptchaObj.getToken();
          // 验证成功 发送验证码
          that.sendSmsCode();
        });
      });
    },
    checkVaptcha() {
      this.$refs.registForm.validate((valid) => {
        if (valid) {
          // vaptchaObject.validate(); // 若没验证验证码 开始验证
          this.sendSmsCode();
        }
      });
    },
    sendSmsCode() {
      this.form.captchaId = this.captchaId;
      let data = {
        code: this.form.imgCode,
        captchaId: this.form.captchaId,
      };
      this.sending = true;
      this.getSms = "发送中";
      sendRegistSms(this.form.mobile, data).then((res) => {
        this.getSms = "获取验证码";
        this.sending = false;
        // vaptchaObject.reset();
        if (res.success) {
          this.$Message.success("发送短信验证码成功");
          // 开始倒计时
          this.$refs.countDown.startCountDown();
        }
      });
    },
    changeInputPass(v, grade, strength) {
      this.form.passStrength = strength;
    },
    submitRegist() {
      this.$refs.registForm.validate((valid) => {
        if (valid) {
          if (!this.saveLogin) {
            return this.$Message.warning(
              "请查看并勾选同意用户注册协议及注册协议"
            );
          }
          if (!this.form.code) {
            this.errorCode = "验证码不能为空";
            return;
          } else {
            this.errorCode = "";
          }
          this.loading = true;
          registMobile(this.form).then((res) => {
            this.loading = false;
            if (res.success) {
              this.$Message.success("注册成功");
              this.$router.push({
                name: "login",
              });
            } else {
              // vaptchaObject.reset();
            }
          });
        }
      });
    },
  },
  mounted() {
    // this.initVaptcha();
    this.getCaptchaImg();
  },
};
</script>

<style lang="less">
@import "./regist.less";
@import "./login.less";
.agreement1 {
  font-size: 12px;
  color: #515a6e;
  cursor: pointer;
  color: #2d8ce0;
  // border-bottom: 1px solid #2d8cf0;
  margin-top: 4px;
  margin-left: -10px;
}
.agreement2 {
  font-size: 12px;
  color: #515a6e;
  cursor: pointer;
  color: #2d8ce0;
  // border-bottom: 1px solid #2d8cf0;
  margin-top: 4px;
  // text-decoration: underline;
}
.RadioGroupcss {
  margin-bottom: 10px;
}
.long-to {
  margin-left: 120px;
}
.Formbox {
  width: 355px;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.Formbox1 {
  color: #2d8ce0 !important;
  border-bottom: 2px solid #2d8cf0;
}
.textcss {
  font-size: 17px;
  position: relative;
  top: -66px;
  left: 243px;
}
</style>
